<template>
  <el-row class="editInfo" align="middle">
    <el-col class="col">
      <el-row align="middle">
        <el-col class="name" :span="2">门店名称</el-col>
        <el-col :span="22"
          ><el-input v-model="xq.communityName" clearable
        /></el-col>
      </el-row>
    </el-col>
    <el-col>
      <el-row align="middle">
        <el-col class="name" :span="2">所属地区</el-col>
        <el-col :span="22" class="select">
          <el-cascader
            size="large"
            :options="regionData"
            v-model="selectedOptions"
            @change="addressChange"
          >
          </el-cascader>
        </el-col>
        <el-col class="name" :span="2"></el-col>
        <el-col :span="22"
          ><el-input
            v-model="xq.communityAddress"
            placeholder="请输入详细地址"
            clearable
        /></el-col>
      </el-row>
    </el-col>
    <el-col class="col">
      <el-row align="middle">
        <el-col class="name" :span="2">门店坐标</el-col>
        <el-col :span="22">
          <el-row align="middle">
            <el-col :span="2"
              ><el-button @click="getAddress">获取位置</el-button></el-col
            >
            <el-col :span="12" :offset="2">{{ address }}</el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-col>
    <el-col class="col">
      <el-row align="middle">
        <el-col class="button">
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="save">保存</el-button></el-col
        >
      </el-row>
    </el-col>
  </el-row>
</template>

<script setup >
import axios from "axios";
import { regionData, codeToText } from "element-china-area-data";

import {
  defineProps,
  ref,
  reactive,
  watchEffect,
  defineEmits,
  computed,
} from "vue";

const emits = defineEmits(["update"]);
const props = defineProps(["info"]);
let xq = ref({});

watchEffect(function () {
  xq.value = { ...props.info };
});
watchEffect(function () {
  xq.value = reactive(
    xq.value,
    xq.value.communityName,
    xq.value.address,
    xq.value.communityLongitude,
    xq.value.communityLatitude
  );
});
//
function getKeyByValue(value) {
  for (let key in codeToText) {
    if (codeToText[key] == value) {
      return key;
    }
  }
  return null;
}
let selectedOptions = ref({
  //这里没有实现
  0: getKeyByValue(xq.value.communityProvince),
  1: getKeyByValue(xq.value.communityCity),
  2: getKeyByValue(xq.value.communityDistrict),
});
watchEffect(function () {
  selectedOptions = {
    0: getKeyByValue(xq.value.communityProvince),
    1: getKeyByValue(xq.value.communityCity),
    2: getKeyByValue(xq.value.communityDistrict),
  };
  console.log(selectedOptions);
});

let allAddress = "";
const addressChange = function (arr) {
  // console.log(arr);
  // console.log(selectedOptions);
  allAddress = codeToText[arr[0]] + codeToText[arr[1]] + codeToText[arr[2]];
  xq.value = {
    ...xq.value,
    communityCity: codeToText[arr[1]],
    communityCoordinates: allAddress,
    communityDistrict: codeToText[arr[2]],
    communityProvince: codeToText[arr[0]],
  };
};
//
const cancel = function () {
  xq.value = { ...props.info };
  emits("update", xq.value, false);
};

let address = ref();
address.value = computed(function () {
  return xq.value.communityLongitude + "," + xq.value.communityLatitude;
});
const getAddress = async function () {
  try {
    let res = await axios.get(
      `https://restapi.amap.com/v3/geocode/geo?key=457886b5972a97e93fb9cdccebfd450f&address=${xq.value.communityCoordinates}`
    );
    address.value = res.data.geocodes[0].location;
    //经纬度赋值刷新
    xq.value.communityLatitude = address.value.split(",")[1];
    xq.value.communityLongitude = address.value.split(",")[0];
    address.value =
      xq.value.communityLatitude + "," + xq.value.communityLongitude;
  } catch (error) {
    alert("获取不到地址！");
  }
};
const save = async function () {
  let res = await axios.post(
    "http://43.143.190.87:8091/panghudaojiaBackend/community/communityUpdate",
    {
      ...xq.value,
      addOrUpdateFlag: 2,
    }
  );
  emits("update", xq.value, false);
  console.log(xq.value);
  console.log(res);
};
</script>


<style lang="less" scoped>
.col {
  margin: 10px 0;
  .row {
    margin-top: 20px;
    box-sizing: border-box;
  }
}
.name {
  padding-right: 8px;
}
.select {
  margin-bottom: 10px;
}
.button {
  text-align: right;
}
/deep/ .header {
  background-color: #1890ff !important;
  color: white;
}
</style>